<template>
  <div v-loading="loading">
    <div class="top display-flex justify-content align-items">
      企业介绍
    </div>
    <div class="content">
      <div class="title">
        <img src="../assets/image/titleL.png" width="500" alt="" title=""/>
        <span>企业介绍</span>
        <img src="../assets/image/titleR.png" width="500" alt="" title=""/>
      </div>
      <div class="display-flex space-between flex-item">
        <div class="about">
          <img :src="com_image" width="600" alt="企业介绍" title=""/>
        </div>
        <div class="about">
          <p v-html="com_content"></p>
        </div>
      </div>
     </div>
    <div class="SBZS SBAL">
      <div class="title">
        <img src="../assets/image/titleL.png" width="500" alt="" title=""/>
        <span>联系我们</span>
        <img src="../assets/image/titleR.png" width="500" alt="" title=""/>
      </div>
      <div class="about2W display-flex space-between flex-item">
        <div class="about2">
           <div class="aboutUs1">
             <p>公司名称</p>
             <p>{{com_name}}</p>
           </div>
          <div class="aboutUs2">
            <p>客服电话</p>
            <p>{{phone}}</p>
          </div>
        </div>
        <div class="">
          <img :src="aboutUsImg" width="600" alt="联系我们" title=""/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "aboutUs",
    data() {
      return {
        loading: false,

        phone: '',
        com_name:'',  //公司名称
        com_image:'',   //公司介绍图片
        aboutUsImg: '',  //联系我们图片
        com_content:'',  //公司介绍
      }
    },
    created() {

    },
    methods: {
      getData() {
        let that = this;
        this.$http
          .post(this.$api.default.aboutUs,)
          .then(res => {
            // console.log('数据', res);

            res.data[1].value = this.$api.default.url_ + res.data[1].value;
            res.data[3].value = this.$api.default.url_ + res.data[3].value;
            res.data[4].value = this.$api.default.url_ + res.data[4].value;

            that.phone = res.data[0].value;
            that.com_name = res.data[5].value;
            that.aboutUsImg = res.data[4].value;
            that.com_image = res.data[3].value;
            that.com_content = res.data[2].value;

          }).catch(error => {
          })
          .then(() => {
          });
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getData();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {}, //生命周期 - 创建之前
    beforeCreate() {},
    //生命周期 - 挂载之前
    beforeMount() {},
    //生命周期 - 更新之前
    beforeUpdate() {},
    //生命周期 - 更新之后
    updated() {},
    //生命周期 - 销毁之前
    beforeDestroy() {},
    //生命周期 - 销毁完成
    destroyed() {},
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
  }
</script>

<style scoped>
  .top{
    height: 500px;
    min-width: 1200px;
    background: url("../assets/image/banner4.png") no-repeat;
    background-position: center center;
    background-size: cover;
    box-sizing: border-box;
    font-size: 50px;
    color: #FFFFFF;
  }
  .top p{
    font-size: 50px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 60px;
    text-align: center;
    margin-bottom: 60px;
  }
  .content{
    width: 1200px;
    margin: auto;
  }
  .top >>> .el-tabs__nav-wrap::after{
    display: none;
  }
  .top >>> .el-tabs__item{
    width: 98px;
    height: 40px;
    border-radius: 6px;
    font-size: 24px;
    color: #fff;
    line-height: 40px;
    text-align: center;
    padding: 0px;
  }
  .top >>> .el-tabs__item.is-active{
    background: #FFFFFF;
    color: #1890FF;
  }
  .top >>> .el-tabs__active-bar{
    display: none;
  }
  .top >>> .el-tabs__nav{
    float: none;
    text-align: center;
  }
  .top >>> .el-tabs__content{
    width: 1200px;
    margin: auto;
  }
  .top >>> .el-input-group{
    width: 800px;
    margin: auto;
  }
  .title{
    text-align: center;
    font-size: 32px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #1890FF;
    /*line-height: 84px;*/
    margin: 70px 0;
  }
  .title span{
    display: inline-block;
    margin: 0 20px;
  }
  .top >>> .el-input-group__append{
    background-color: #1890FF;
    color: #FFFFFF;
    font-size: 22px;
    border: none;
  }
  .top >>> .el-input__inner{
    height: 60px;
    font-size: 18px;
  }
  .fL{
    height: 500px;
    border-radius: 10px;
    border: 1px solid #B7B7B7;
    overflow: auto;
    margin-bottom: 60px;
  }
  .fL >>> .el-tabs--left,
  .fL >>> .el-tabs__content,
  .fL >>> .el-tabs__content .el-tab-pane{
    height: 100%;
  }
  .el-tabs--left >>> .el-tabs__header.is-left{
    width: 180px;
    margin-right: 0;
    background: url("../assets/image/bg_z2.png") no-repeat;
    background-position: center center;
    background-size: cover;
    padding-top: 20px;
    box-sizing: border-box;
  }
  .el-tabs--left >>> .el-tabs__active-bar.is-left{
    display: none;
  }
  .el-tabs--left >>> .el-tabs__item.is-left{
    width: 128px;
    background: #FFFFFF;
    margin: auto;
    margin-bottom: 20px;
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
  }
  .left p{
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    margin-top: 50px;
    margin-bottom: 25px;
  }
  .left .el-input{
    width: 244px;
    margin: auto;
    display: block;
    margin-bottom: 100px;
  }
  .right{
    width: calc(100% - 300px);
    height: 500px;
    float: left;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .hzqy{
    background: #1890FF;
    min-width: 1200px;
    margin: auto;
  }
  .hzqy .title{
    color: #fff;
    padding-top: 70px;
  }
  .hzqy > div{
    width: 1200px;
    margin: auto;
  }
  .hzqy >>> .el-carousel__item{
    background: transparent;
  }
  .hzqy >>> .el-carousel__arrow--left,
  .hzqy >>> .el-carousel__arrow--right{
    background: #fff;
    box-shadow: 0px 0px 4px 4px #ddd;
  }
  .hzqy >>> .el-card__body{
    padding: 65px;
  }
  .about:nth-of-type(2){
    margin-left: 51px;
    font-size: 22px;
    font-weight: 400;
    color: #333333;
    line-height: 32px;
    text-indent:2em;
  }
  .SBAL{
    margin-top: 80px;
    background: #F6F7F9;
    overflow: auto;
  }
  .SBAL .title{
    padding-top: 70px;
    margin: 0;
    margin-bottom: 70px;
  }
  .SBAL >>> .el-row{
    width: 1200px;
    margin: auto!important;
    padding-bottom: 50px;
  }
  .about2W{
    width: 1200px;
    margin: auto;
    padding-bottom: 80px;
  }
  .about2{
    text-align: center;
    width: 100%;
  }
  .aboutUs1{
    height: 186px;
    background: #fff;
    line-height: 30px;
    padding-top: 60px;
    box-sizing: border-box;
  }
  .aboutUs2{
    height: 114px;
    background: #1890FF;
    border-radius: 0px 0px 0px 10px;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 30px;
    padding-top: 25px;
    box-sizing: border-box;
  }
  .box-card img{
    display: block;
    margin: auto;
    margin-bottom: 30px;
  }
  .box-card p:nth-of-type(1){
    text-align: center;
    margin-bottom: 15px;
  }
  .SBZS >>> .el-tabs__nav-scroll{
    padding-left: 50px;
  }
  .SBZS >>> .el-tabs__item{
    font-size: 18px;
  }
  .SBZS >>> .el-tabs__header{
    margin-bottom: 60px;
  }
  .SBZS .el-col-6{
    margin-bottom: 30px;
  }
  .top > div{
    text-align: center;
  }
</style>
